<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>多肽计算器(专业版{:config('advance_version')})</title>
		<link charset="utf-8" rel="stylesheet" href="__PUBLIC__/static/asset/bootstrap/3.3.6/css/bootstrap.min.css">
		
        <style>
        	.no-padding-right{
        		padding-right : 0!important;
        	}
        	.no-padding-left{
        		padding-left: 0!important;
        	}
            .jumbotron{
            	padding-top: 15px !important;
            	padding-bottom: 15px !important;
            }
        </style>
	</head>
	<body>
	    <input type="hidden" id="show" value="{$show}">
		<div class="container-fluid">
			<div class="row">
				<div class="jumbotron">
					<h4><a href="{:config('base')}/index.php"><i class="glyphicon glyphicon-home"></i></a> 多肽计算器</h4>
					<form id="form-data" action="{:url('result_advance')}" method="post" class="form-horizontal" onsubmit="return false;">
					<div class="form-group">
						<label class="col-md-10 col-sm-10 col-xs-10 control-label">
							序列（可输入氨基酸单字母或多字母，单字母为大写字母）
							<a href="#" title="软件说明" data-toggle="modal" data-target="#help-modal"><i class="glyphicon glyphicon-question-sign"></i></a>
						</label>
					</div>
					
					<div class="form-group">
						
						<div class="col-md-10 col-sm-10 col-xs-10 no-padding-left no-padding-right">
							<input type="text" name="amino" value="{$amino|default=''}" class="form-control" id="amino" title="amino">
						</div>
						<div class="col-md-1  col-sm-2 col-xs-12">
							<button id="calculate-button" type="button" class="btn btn-primary pull-right"> 计算 </button>
						</div>
					</div>
                    <div class="form-group">
                    	<div class="col-md-2 col-sm-2 col-xs-3">
							
						</div>
						<div class="col-md-6 col-sm-6 col-xs-6">
							<label class="col-md-2 control-label no-padding-left no-padding-right">二硫键修饰&nbsp;</label>
							<div class="col-md-4 no-padding-left">
								<input class="form-control" type="text" id="s2" name="s2" placeholder="格式：3-8,5-16">
							</div>
							
							<label class="col-md-2 control-label no-padding-right">成环类型&nbsp;</label>
							<div class="col-md-4 no-padding-left">
								<select id="cyclo-type" name="cyclo-type" class="form-control" title="成环类型">
									<option value="-1">未成环</option>
									<option value="0">主链成环</option>
									<option value="1">侧链成环</option>
									<option value="2">主（N端）侧（C端）成环</option>
									<option value="3">侧（N端）主（C端）成环</option>
									<option value="4">硫醚成环</option>
								</select>
								<div id="cyclo-type-info" style="display: none;">
									chainA:
									<select id="cyclo-type-A" name="cyclo-type-A" class="form-control" title="成环类型">
										<option value="-1">未成环</option>
										<option value="0">主链成环</option>
										<option value="1">侧链成环</option>
										<option value="2">主（N端）侧（C端）成环</option>
										<option value="3">侧（N端）主（C端）成环</option>
										<option value="4">硫醚成环</option>
									</select>
									
									chainB:
									<select id="cyclo-type-B" name="cyclo-type-B" class="form-control" title="成环类型">
										<option value="-1">未成环</option>
										<option value="0">主链成环</option>
										<option value="1">侧链成环</option>
										<option value="2">主（N端）侧（C端）成环</option>
										<option value="3">侧（N端）主（C端）成环</option>
										<option value="4">硫醚成环</option>
									</select>
								</div>
							</div>
							
						</div>
						<label class="col-md-2 col-sm-2 col-xs-3">
							
						</label>
                    </div>
				</form>
				<div id="message-show" class="alert alert-danger hidden" role="alert">警告内容</div>
				</div>
				<!--
                	/.col-md-12
                -->
			</div>
			<!-- /.row -->
			
			<div class="row">
				<div id="result-show" class="col-md-12 hidden">
					<div class="title"><h3>计算结果</h3></div>
					<div class="body" id="result-body"></div>
				</div>
			</div>
		</div>

		<div class="modal fade" id="help-modal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h4 class="modal-title">肽含量计算器</h4>
					</div>
					<div class="modal-body">
						<div>
							1.序列输入可以单字母输入，比如序列：Ala-Cys-Asp-Glu-Phe-Gly，也可以输入ACDEFG。对于特殊氨基酸，可使用其缩写，但需要用-进行间隔，比如序列：Ala-Cys-Asp-Glu-Phe-Gly-Ser(PO3H)，也可以输入ACDEFG-pS。对于D型氨基酸，比如D型Ala，可以输入DAla。<br>
							2.关于特殊氨基酸的标示方法，<a href="{:url('amino_detail')}" target="_blank">点击此处</a><br>
							3.对于酰胺键成环序列，可以在成环处加入Cyclo。比如序列Glu-Cys-Asp-Glu-Phe-Lys首尾成环，可以输入Cyclo(Glu-Cys-Asp-Glu-Phe-Lys)或Cyclo(ECDEFK)，并在下面选择“主链成环”。<br>

							4.对于硫醚键，比如卡贝缩宫素：Butyryl-Tyr(Me)-Ile-Gln-Asn-Cys-Pro-Leu-Gly-NH2 (Sulfide bond between Butyryl-4-yl and Cys),可以输入Cyclo(Butyryl-Tyr(Me)-Ile-Gln-Asn-Cys)-Pro-Leu-Gly-NH2，或输入Cyclo(Butyryl-Tyr(Me)-IQNC)PLG-NH2并在下面选择“硫醚成环”。<br>

							5.为了更好的判断序列，建议特殊序列采用三字母序列进行输入。<br>
							6.对于输出的溶解性：溶解性1：可以指导你进行溶解性实验；溶解性2：只判断是否可溶于水，由于采用更严格的判断条件，部分水溶性样品的判断结果是“水溶性不确定”。<br>
							7.更多序列举例，<a href="{:url('sample')}" target="_blank"> 点击此处 </a>

						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->

		<script type="text/html" id="result_template">
			<div class="col-md-12">
			<ul class="list-unstyled">
				<li class="col-md-12 col-sm-12"><b>1字符：</b>{{d.single}}</li>
				<li class="col-md-12 col-sm-12"><b>多字符：</b>{{d.full}}</li>
				<li class="col-md-4 col-sm-6"><b>氨基酸个数：</b>{{d.aminoCount}}</li>
				<li class="col-md-8 col-sm-6"><b>分子式：</b>{{d.formulaHtml}}</li>
				<li class="col-md-4 col-sm-6"><b>平均分子量(MW)：</b>{{d.mw}}g/mol</li>
				<li class="col-md-8 col-sm-6"><b>精确分子量(Exact Mass)：</b>{{d.em}}</li>
				<li class="col-md-4 col-sm-6"><b>等电点(PI)：</b>{{d.pi}}</li>
				<li class="col-md-8 col-sm-6"><b>pH=7.0时的净电荷数：</b>{{d.pi7}}</li>
				<li class="col-md-4 col-sm-6"><b>平均亲水性：</b><span title="亲水值：{{d.hydrophily}}">{{d.hydrophilyResult}}</span></li>
				<li class="col-md-8 col-sm-12">
					<b>溶解性2：</b>{{d.solubilityResult2}}
				</li>
				<li class="col-md-12 col-sm-12">
					<b>溶解性1：</b>{{d.solubilityResult}}
					<br><span style="color:#666">( 备注：由于溶解性不仅与氨基酸的序列有关，也和产品所带的反离子有关，若溶解性遇到问题，可咨询我们的技术人员，我们可提供溶解方法或进行序列修饰以提高溶解性。)</span>
				</li>

			</ul>
			</div>
			<table class="table table-bordered {{d.table_show}}">
				<tr>
					<th>
						氨基酸
					</th>
					<th>
						个数
					</th>
					<th>
					         残基分子量
					</th>
				</tr>
                <tbody id="table-body"></tbody>
                <tfoot>
                	<tr>
                		<td>氨基酸总数</td>
                		<td>{{d.aminoCount}}</td>
                		<td></td>
                	</tr>
                	
                </tfoot>
			</table>
			<div class="{{d.table_show}}"> (PI相关氨基酸个数)</div>
			<table class="table table-bordered {{d.table_show}}">
				<tr>
					<th>
						氨基酸
					</th>
					<th>
						个数
					</th>
					<th>
					         残基分子量
					</th>
				</tr>
                <tbody id="table-body-pi"></tbody>
                <tfoot>
                	<tr>
                		<td>氨基酸总数</td>
                		<td>{{d.piAminoCount}}</td>
                		<td></td>
                	</tr>
                	
                </tfoot>
			</table>
			<div class="row">
				<div id="line-echarts" style="height:500px" class="col-md-12"></div>
			</div>
			
		</script>
		<script id="table-body-template" type="text/html">
			<tr>
					<td>
						{{d.name||''}}
					</td>
					<td>
						{{d.count}}
					</td>
					<td>
					   {{d.residue_weight||'-'}}
					</td>
				</tr>
		</script>
			
		<script src="__PUBLIC__/static/sea.js"></script>
		<script src="__PUBLIC__/static/skin/default/config.js"></script>
		
		<script>
			seajs.use('skin/default/index_advance', function(index){
				index.initCalculate({$cal}, "{$nterm|default='H-'}", "{$cterm|default='-OH'}");
				index.sCheck();
			})
		</script>
	</body>
</html>
